<!--
    软电话 组件
    参数：
        phoneParams:  从 store 拿
        
       // isCallOut (Boolean) 是否一键呼叫
       // callNumber (String) 一键呼叫 拨出的电话号
            
-->

<template>
    <div class="approve-softphone">
        <div class="softphone-box" :class="active ? 'active':'no-active'">
            <div class="softphone">
                <div class="softphone-icon" @click="showSoftHhone">
                    <div class="normal">
                        <Icon type="ios-call" />
                        <span>电话</span>
                    </div>
                    <div v-show="active">
                        <div class="title-hide">
                            <Icon type="ios-arrow-forward" />
                            <span>隐藏</span>
                        </div>
                    </div>
                    <div v-show="!active">
                        <div class="title-show">
                            <Icon type="ios-arrow-back" />
                            <span>显示</span>
                        </div>
                    </div>
                </div>
                <ul class="softphone-btns">
                    <li>
                        <div class="phone">
                            <Input v-model="softPhoneNumber" placeholder="请输入电话号码" />
                        </div>
                    </li>
                    <li>
                        <div class="btns-item">
                            <Button type="primary" @click="initParam" :disabled="btnInit">初始化</Button>
                            <Button type="primary" @click="btnSignIn" :disabled="btnList.btnSignIn">登录</Button>
                            <Button type="primary" @click="btnSetIdle" :disabled="btnList.btnSetIdle">示闲</Button>
                            <Button type="primary" @click="btnSetBusy" :disabled="btnList.btnSetBusy">示忙</Button>
                        </div>
                    </li>
                    <li>
                        <div class="btns-item">
                            <Button type="primary" @click="btnAnswer" :disabled="btnList.btnAnswer">接听</Button>
                            <Button type="primary" @click="btnHangup" :disabled="btnList.btnHangup">挂机</Button>
                            <Button type="primary" @click="btnTransfer" :disabled="btnList.btnTransfer">转接</Button>
                            <Button type="primary" @click="btnConsultation" :disabled="btnList.btnConsultation">咨询</Button>
                        </div>
                    </li>
                    <li>
                        <div class="btns-item">
                            <Button type="primary" @click="btnSignOut" :disabled="btnList.btnSignOut">签出</Button>
                            <Button type="primary" @click="btnCallOut" :disabled="btnList.btnCallOut">呼出</Button>
                            <Button type="primary" @click="btnHold" :disabled="btnList.btnHold">保持</Button>
                            <Button type="primary" @click="btnCannel" :disabled="btnList.btnCannel">取消</Button>
                        </div>
                    </li>
                    <li>
                        <div class="btns-item">
                            <Button type="primary" @click="btnsetRetrieveHold" :disabled="btnList.btnsetRetrieveHold">唤醒</Button>
                            <Button type="primary" @click="btnSingleStepConfCallEx" :disabled="btnList.btnSingleStepConfCallEx">会议</Button>
                        </div>
                    </li>
                    <li>
                        <div class="btns-item">
                            <Button v-show="!btnList.btnstopConnect" type="primary" @click="btnstopConnect">结束咨询</Button>
                            <Button v-show="!btnList.btnreConnect" type="primary" @click="btnreConnect">取消咨询</Button>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
import { mapGetters, mapActions, mapMutations } from "vuex";

import mycommAgent from "./mycommAgent";
import { deepClone } from "@/libs/utils/ObjectClone";

export default {
    name: 'SoftPhone',
    props: {
        // callNumber: {
        //     type: String,
        // },
        // isCallOut: {
        //     type: Boolean,
        //     default: false
        // },
        // params: {
        //     type: Object,
        // }
    },
    data() {
        return {
            active: false,
            softPhoneNumber: null,
            // setBusyDisable:true,
            btnInit: false,
            btnList: {
                btnInit: false,
                btnSignIn: true,
                btnSetIdle: true,
                btnSetBusy: true,

                btnAnswer: true, //接听
                btnHangup: true, //挂机
                btnTransfer: true, //转接
                btnConsultation: true, //咨询

                btnSignOut: true,
                btnCallOut: true,
                btnHold: true,
                btnCannel: true,

                btnsetRetrieveHold: true, // 唤醒
                btnSingleStepConfCallEx: true, //会议

                btnstopConnect: true, //结束咨询
                btnreConnect: true,  // 取消咨询

            },
            currentOPT: '', // MEETING  TRANSFER,
            currentCallId: 0,
            loginStatus: 0, // 登录状态

        }
    },
    mixins: [mycommAgent],
    computed: {
        ...mapGetters({ phoneParams: "phoneParams" })
    },
    watch: {
        phoneParams(val) {
            console.log(val, 'phoneParams');
            if (Object.keys(val).length > 0) {
                // this.initParam(val)
                this.active = true;
                if (!this.loginStatus) {
                    this.btnSignIn()
                } else {
                    this.softPhoneNumber = val.callNumber;
                    this.btnCallOut()
                }
            }
        }
    },
    mounted() {
        this.initParam()
        console.log('phoneParams', this.phoneParams);
    },
    methods: {
        ...mapMutations(['updatePhoneParams']),
        showSoftHhone() {
            this.active = !this.active
        },
        initParam() {
            this.init()
            this.btnInit = true;
            this.btnList.btnSignIn = false;
        },
        btnSignIn() {
            this.login()
        },
        btnSetIdle() {
            this.clickSetIdle()
        },
        btnSetBusy() {
            this.clickSetBusy()
        },
        btnAnswer() {
            this.answer()
        },
        btnHangup() {
            this.clickHangup()
        },
        btnTransfer() {
            let phone = this.softPhoneNumber;
            if (!phone) {
                this.$Message.error("请输入呼出号码")
                return;
            }
            this.Transfer(phone)
        },
        btnConsultation() {
            // this.OnConsultationFailure()
            let phone = this.softPhoneNumber;
            if (!phone) {
                this.$Message.error("请输入呼出号码")
                return;
            }
            this.doConsultation(phone)
        },
        btnSignOut() {
            this.clickSignOut()
        },
        btnCallOut() {
            let phone = this.softPhoneNumber;
            if (!phone) {
                this.$Message.error("请输入呼出号码")
                return;
            }
            console.log('phone', phone);

            this.clickCallOut(1, phone, '申请号1', '客户姓名1') //type 登录状态, callee, applicationno, borrower
        },
        //保持
        btnHold() {
            this.Hold()
        },

        //取消
        btnCannel() {
            this.cannel()
        },
        //  取保持
        btnsetRetrieveHold() {
            this.setRetrieveHold()
        },
        btnSingleStepConfCallEx() {

        },
        //结束咨询
        btnstopConnect() {
            this.stopConnect()
        },
        // 取消咨询
        btnreConnect() {
            this.reConnect()
        },

        // 回调
        v_loginSuccess(evt) {
            console.log('登录成功', evt);
            this.loginStatus = 1;
            if (this.phoneParams && this.phoneParams.isCallOut) {
                this.softPhoneNumber = this.phoneParams.callNumber;
                this.btnCallOut()
            }
        },
        loginFail(evt) {
            // $("#btnInit").attr("disabled", false);
            // $("#btnInit").removeClass("Shover");
            // alertError(evt, '登录失败')
            this.initParam = false
            this.$Message.error("登录失败")
            console.log(evt, '登录失败');
        },
        //不同状态改变按钮状态
        refreshBtns(state) {
            // console.log('状态码', state);
            //整理初始状态
            let btnList = {
                btnSignIn: true,
                btnSetIdle: true, // 示闲
                btnSetBusy: true, // 示忙

                btnAnswer: true, //接听
                btnHangup: true, //挂机
                btnTransfer: true, //转接
                btnConsultation: true, //咨询

                btnSignOut: true, // 签出
                btnCallOut: true, // 拨号
                btnHold: true, // 保持
                btnCannel: true, // 取消

                btnsetRetrieveHold: true, // 唤醒
                btnSingleStepConfCallEx: true, //会议

                btnstopConnect: true, // 结束咨询
                btnreConnect: true,  // 取消咨询

            }
            let currentCallId = 0;
            let currentOPT = '';

            // $("#btnCannel").unbind("click");
            // $("#btnCannel").one("click", cannel);
            // $("#btnCannel").val("取消");

            if (state == 0) {
                // currentOPT = '';
                btnList.btnSignIn = false
            }
            if (state == 2) {
                btnList.btnSignOut = false // 签出
            }

            //忙碌
            if (state == 3) {
                btnList.btnSignOut = false // 签出
                btnList.btnSetIdle = false // 空闲
                btnList.btnCallOut = false // 外拨            
            }
            //空闲
            if (state == 4) {
                btnList.btnSignOut = false // 签出
                btnList.btnSetBusy = false // 置忙
                btnList.btnCallOut = false // 外拨
                // currentOPT = '';
            }
            //通话中
            if (state == 7 || state == 8 || state == 11) {
                btnList.btnHangup = false  // 挂机
                //btnList.btnTransfer = false  // 转移
                // btnList.btnConsultation = false // 咨询   因业务需求，屏蔽两个转移和咨询功能
                btnList.btnHold = false // 保持
            }
            // 话后
            if (state == 12) {
                btnList.btnSignOut = false // 签出
                btnList.btnSetIdle = false // 空闲
                btnList.btnCallOut = false // 外拨            
            }
            //外拨本地振铃
            if (state == 9 || state == 10 || state == 27 || state == 28) {
                btnList.btnHangup = false  // 挂机
            }
            // 保持状态
            if (state == 15) {
                btnList.btnsetRetrieveHold = false  //唤醒
            }
            //咨询准备
            if (state == 16) {
                // $("#btnCannel").unbind("click");
                // $("#btnCannel").one("click", reConnect);
                // $("#btnCannel").val("取消咨询");
                btnList.btnreConnect = false //取消咨询

            }
            //咨询中
            if (state == 18) {
                // $("#btnCannel").unbind("click");
                // $("#btnCannel").one("click", stopConnect);
                // $("#btnCannel").val("结束咨询");
                btnList.btnstopConnect = false // 结束咨询

                //转移给咨询方
                //三方通话
            }
            this.btnList = btnList;
        }
    }

}
</script>

<style lang="less" scoped>
ul,
li {
    list-style: none;
}
.approve-softphone {
    position: fixed;
    right: 0;
    bottom: 120px;
    z-index: 999;
    .softphone-box {
        overflow: hidden;
        transition: all linear 0.3s;
        &.active {
            width: 200px;
        }
        &.no-active {
            width: 50px;
        }
    }
    .softphone {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: start;
        flex-flow: row nowrap;
        align-items: flex-start;
    }
    .softphone-icon {
        width: 50px;
        height: 24px;
        line-height: 24px;
        flex-shrink: 0;
        background-color: #2d8cf0;
        text-align: center;
        border-top-left-radius: 3px;
        border-bottom-left-radius: 3px;
        color: #fff;
        cursor: pointer;

        .title-hide,
        .title-show {
            display: none;
        }
        &:hover {
            .normal {
                display: none;
            }
            .title-hide,
            .title-show {
                display: block;
            }
        }
    }
    .softphone-btns {
        // width: 132px;
        width: 156px;
        flex-shrink: 0;
        background-color: #fff;
    }
    .phone {
        /deep/ input {
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
        }
    }
    .btns-item {
        padding: 8px 8px 0;
        button {
            // width: 52px;
            width: 64px;
            margin-bottom: 8px;
            &:nth-child(2n-1) {
                margin-right: 8px;
            }
        }
    }
}
</style>
